<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <div>
          <a-collapse v-model="activeKey">
            <a-collapse-panel header="日志信息" key="1">
              <a-row class="form-row" :gutter="24">
                <a-col :lg="6">
                  <a-form-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['createBy', validatorRules.createBy]" placeholder="请输入创建人"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-date
                      placeholder="请选择创建日期"
                      v-decorator="['createTime', validatorRules.createTime]"
                      :trigger-change="true"
                      style="width: 100%"
                    />
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="更新人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['updateBy', validatorRules.updateBy]" placeholder="请输入更新人"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="更新日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-date
                      placeholder="请选择更新日期"
                      v-decorator="['updateTime', validatorRules.updateTime]"
                      :trigger-change="true"
                      style="width: 100%"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-panel>
            <a-collapse-panel header="组织信息" key="2">
              <a-row class="form-row" :gutter="24">
                <a-col :lg="6">
                  <a-form-item label="所属部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input
                      v-decorator="['sysOrgCode', validatorRules.sysOrgCode]"
                      placeholder="请输入所属部门"
                    ></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="租户ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query01', validatorRules.query01]" placeholder="请输入租户ID"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="是否有效" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query02', validatorRules.query02]" placeholder="请输入是否有效"></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-panel>
            <a-collapse-panel header="订单信息" key="3">
              <a-row class="form-row" :gutter="24">
                <a-col :lg="6">
                  <a-form-item label="订单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query03', validatorRules.query03]" placeholder="请输入订单号"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query04', validatorRules.query04]" placeholder="请输入姓名"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query05', validatorRules.query05]" placeholder="请输入电话"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="身份证" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query06', validatorRules.query06]" placeholder="请输入身份证"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query07', validatorRules.query07]" placeholder="请输入车牌号"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="GPS" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query08', validatorRules.query08]" placeholder="请输入GPS"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="贷款金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query09', validatorRules.query09]" placeholder="请输入贷款金额"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="剩余利息" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query10', validatorRules.query10]" placeholder="请输入剩余利息"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="已还本金" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query11', validatorRules.query11]" placeholder="请输入已还本金"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="欠款金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query12', validatorRules.query12]" placeholder="请输入欠款金额"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="风险等级" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query13', validatorRules.query13]" placeholder="请输入风险等级"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="剩余本金" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query14', validatorRules.query14]" placeholder="请输入剩余本金"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="6">
                  <a-form-item label="累计还款" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query15', validatorRules.query15]" placeholder="请输入累计还款"></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-panel>
            <a-collapse-panel header="催收信息" key="4">
              <a-row class="form-row" :gutter="24">
                <a-col :lg="8">
                  <a-form-item label="催收状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query16', validatorRules.query16]" placeholder="请输入催收状态"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="8">
                  <a-form-item label="催收备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query17', validatorRules.query17]" placeholder="请输入催收备注"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="8">
                  <a-form-item label="上次催收时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input
                      v-decorator="['query18', validatorRules.query18]"
                      placeholder="请输入上次催收时间"
                    ></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="8">
                  <a-form-item label="上次催收人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['query19', validatorRules.query19]" placeholder="请输入上次催收人"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :lg="8">
                  <a-form-item label="上次催收方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input
                      v-decorator="['query20', validatorRules.query20]"
                      placeholder="请输入上次催收方式"
                    ></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-panel>
          </a-collapse>
        </div>
        <!--<a-form-item label="备用12" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query21', validatorRules.query21]" placeholder="请输入备用12"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用13" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query22', validatorRules.query22]" placeholder="请输入备用13"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用14" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query23', validatorRules.query23]" placeholder="请输入备用14"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用15" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query24', validatorRules.query24]" placeholder="请输入备用15"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用16" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query25', validatorRules.query25]" placeholder="请输入备用16"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用17" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query26', validatorRules.query26]" placeholder="请输入备用17"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用18" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query27', validatorRules.query27]" placeholder="请输入备用18"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用19" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query28', validatorRules.query28]" placeholder="请输入备用19"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用20" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query29', validatorRules.query29]" placeholder="请输入备用20"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用21" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query30', validatorRules.query30]" placeholder="请输入备用21"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用22" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query31', validatorRules.query31]" placeholder="请输入备用22"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用23" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query32', validatorRules.query32]" placeholder="请输入备用23"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用24" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query33', validatorRules.query33]" placeholder="请输入备用24"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用25" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query34', validatorRules.query34]" placeholder="请输入备用25"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用26" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query35', validatorRules.query35]" placeholder="请输入备用26"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用27" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query36', validatorRules.query36]" placeholder="请输入备用27"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用28" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query37', validatorRules.query37]" placeholder="请输入备用28"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用29" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query38', validatorRules.query38]" placeholder="请输入备用29"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="备用30" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="[ 'query39', validatorRules.query39]" placeholder="请输入备用30"></a-input>-->
        <!--</a-form-item>-->
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import JDate from '@/components/jeecg/JDate'

export default {
  name: 'FxjDh05Modal',
  components: {
    JDate
  },
  data() {
    return {
      form: this.$form.createForm(this),
      title: '操作',
      width: 1400,
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      validatorRules: {
        createBy: {},
        createTime: {},
        updateBy: {},
        updateTime: {},
        sysOrgCode: {},
        query01: {},
        query02: {},
        query03: {},
        query04: {},
        query05: {},
        query06: {},
        query07: {},
        query08: {},
        query09: {},
        query10: {},
        query11: {},
        query12: {},
        query13: {},
        query14: {},
        query15: {},
        query16: {},
        query17: {},
        query18: {},
        query19: {},
        query20: {},
        query21: {},
        query22: {},
        query23: {},
        query24: {},
        query25: {},
        query26: {},
        query27: {},
        query28: {},
        query29: {},
        query30: {},
        query31: {},
        query32: {},
        query33: {},
        query34: {},
        query35: {},
        query36: {},
        query37: {},
        query38: {},
        query39: {}
      },
      url: {
        add: '/fxjdh/fxjDh05/add',
        edit: '/fxjdh/fxjDh05/edit'
      }
    }
  },
  created() {},
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            'createBy',
            'createTime',
            'updateBy',
            'updateTime',
            'sysOrgCode',
            'query01',
            'query02',
            'query03',
            'query04',
            'query05',
            'query06',
            'query07',
            'query08',
            'query09',
            'query10',
            'query11',
            'query12',
            'query13',
            'query14',
            'query15',
            'query16',
            'query17',
            'query18',
            'query19',
            'query20',
            'query21',
            'query22',
            'query23',
            'query24',
            'query25',
            'query26',
            'query27',
            'query28',
            'query29',
            'query30',
            'query31',
            'query32',
            'query33',
            'query34',
            'query35',
            'query36',
            'query37',
            'query38',
            'query39'
          )
        )
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          console.log('表单提交数据', formData)
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    popupCallback(row) {
      this.form.setFieldsValue(
        pick(
          row,
          'createBy',
          'createTime',
          'updateBy',
          'updateTime',
          'sysOrgCode',
          'query01',
          'query02',
          'query03',
          'query04',
          'query05',
          'query06',
          'query07',
          'query08',
          'query09',
          'query10',
          'query11',
          'query12',
          'query13',
          'query14',
          'query15',
          'query16',
          'query17',
          'query18',
          'query19',
          'query20',
          'query21',
          'query22',
          'query23',
          'query24',
          'query25',
          'query26',
          'query27',
          'query28',
          'query29',
          'query30',
          'query31',
          'query32',
          'query33',
          'query34',
          'query35',
          'query36',
          'query37',
          'query38',
          'query39'
        )
      )
    }
  }
}
</script>
